<template>
    <div id="bottom">
        <el-button @click="delSelect">删除所选</el-button>
        <span>{{ countAll }}</span>
        <span>{{ countPriceAll }}</span>
        <el-button @click="clearAll">清空所有</el-button>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import emitter from '../eventBus.js'
const datas = ref([])
// 接受datas数据
emitter.on('datasContent', (data) => {
    datas.value = data.value
})
// 删除选中商品
const delSelect = () => {
    let newDatas = datas.value.filter(item => !item.isChecked)
    emitter.emit('datasBack', newDatas)
}
// 清空所有商品
const clearAll = () => {
    let newDatas = []
    emitter.emit('datasBack', newDatas)
}
// 计算被勾选的商品数量
const countAll = computed(() => {
    let newCount = 0
    let data = []
    data = datas.value.filter(item => item.isChecked)
    data.forEach((item) => {
        newCount += item.count
    })
    return newCount
})
// 计算被勾选的商品总价格
const countPriceAll = computed(() => {
    let newPrice = 0
    let data = []
    data = datas.value.filter(item => item.isChecked)
    data.forEach((item) => {
        newPrice += (item.price * item.count)
    })
    return newPrice
})
</script>

<style>
#bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>